<template>
  <view :style="{
      background: '#f7f7f7',
    }">
    <u-sticky :offset-top="navHeight" :h5-nav-height="h5NavHeight">
      <view>
        <u-tabs :list="tabList" :is-scroll="false" :current="activeIndex"
          name="value" @change="changeTabItem"></u-tabs>
      </view>
    </u-sticky>

    <view class="index_warp">
      <study-card type="course" v-for="item in showList" :key="item.id"
        :item="item" />
      <load-more :status="status" />
    </view>
  </view>
</template>

<script>
  import {
    mapState
  } from "vuex";
  import {
    userinfoCourseList,
    userinfoCollect
  } from "@/api/course";
  import list from "@/config/list";
  export default {
    name: "my-study",
    props: {
      h5NavHeight: {
        type: Number,
        default: 0,
      },
      offsetTop: {
        type: [Number, String],
        default: 0,
      },
      isCourse: {
        type: Boolean,
        default: true
      }
    },
    data() {
      return {
        status: "loadmore",
        tabList: list.userCourseTabs,
        activeIndex: 0,
        pageNum: [1, 1, 1],
        pageSize: 20,
        list: [],
      };
    },
    created() {
      const obj = {
        list: [],
        total: 0,
      };
      this.tabList.forEach((v, i) => {
        this.list[i] = obj;
      });
      this.getList();
      this.toRpx = 750 / this.SystemInfo.windowWidth;
    },
    onReachBottom() {
      this.$u.throttle(this.getList(), 1000, true);
    },
    methods: {
      getList() {
        if (this.status == "nomore") return;
        const activeIndex = this.activeIndex;
        if (
          (this.pageSize * (this.pageNum[activeIndex] - 1) >
            this.list[activeIndex] &&
            this.list[activeIndex].total) ||
          0
        ) {
          this.status = "nomore";
        }
        this.status = "loading";
        this.getCurrentList({
          pageNum: this.pageNum[this.activeIndex],
          pageSize: this.pageSize,
          playType: this.playType,
        }).then((res) => {
          this.pageNum[activeIndex] = this.pageNum[activeIndex] + 1;
          let obj = {};
          obj.list = [
            ...((this.list[activeIndex] && this.list[activeIndex].list) ||
              []),
            ...res.list,
          ];
          obj.total = res.total;
          this.showList = obj;
          if (res.list.length < this.pageSize) {
            this.status = "nomore";
          }
        });
      },
      changeTabItem(e) {
        this.activeIndex = e;
        this.status = "loadmore";
        this.getList();
      },
    },
    computed: {
      ...mapState("equipment", ["SystemInfo"]),
      showList: {
        get() {
          return this.list[this.activeIndex].list;
        },
        set(obj) {
          this.$set(this.list, this.activeIndex, obj);
        },
      },
      getCurrentList() {
        return this.isCourse ? userinfoCourseList : userinfoCollect;
      },
      playType: function() {
        return this.activeIndex + 1;
      },
      maxWidth() {
        return this.$store.getters.maxWidth;
      },
      navHeight() {
        // #ifdef H5
        return this.$store.getters.navHeight;
        // #endif
        // #ifndef H5
        return this.$store.getters.navHeight * this.toRpx;
        // #endif
      },
    },
  };
</script>

<style>
  .index_warp {
    padding: 30upx 30upx 0;
  }
</style>
